<!-- 
* @desc:分槽管理槽队列列表
* @fileName:SlotList.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-05-27
!-->
<script lang="ts" setup>
import { reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import slotPagination from "@/components/common/pagination.vue";
import slotItem from "./SlotItem.vue";

const searchData = reactive({
  status: "",
  name: "",
});

interface optionsType {
  label: string;
  value: string;
}

const options: optionsType[] = [
  { label: "正常", value: "a" },
  { label: "异常", value: "b" },
  { label: "停用", value: "c" },
];

const changeSelect = () => {};
</script>

<template>
  <div class="slot-list">
    <!-- 查询 -->
    <div class="slot-list-search">
      <div class="page-search-eventChoose">
        <el-select
          v-model="searchData.status"
          @change="changeSelect"
          clearable
          placeholder="状态"
          size="large"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <el-input
        v-model="searchData.name"
        clearable
        placeholder="请输入执行器名称搜索"
        :suffix-icon="Search"
        class="w215"
      ></el-input>
      <el-button class="slot-list-sort-btn"
        ><img src="@/assets/img/slot-manage/time-desc.png"
      /></el-button>
      <el-button class="slot-list-sort-btn"
        ><img src="@/assets/img/slot-manage/nofinished-desc.png"
      /></el-button>
    </div>
    <!-- 槽队列数据 -->
    <div class="slot-list-data mt20">
      <slot-item></slot-item>
    </div>
    <!-- 分页 -->
    <slot-pagination></slot-pagination>
  </div>
</template>

<style lang="scss" scoped>
.mt20 {
  margin-top: 20px;
}
.slot-list-search {
  display: flex;
  .slot-list-sort-btn {
    width: 40px;
    height: 30px;
    img {
      width: 15px;
      height: 13px;
    }
  }
  .w215 {
    width: 215px;
    flex-shrink: 0;
  }
  .el-input {
    padding-right: 15px;
    :deep(.el-input__wrapper) {
      height: 30px;
      border-radius: 0;
      background-color: #fff !important;
      box-shadow: unset !important;
    }
    :deep(.el-input__suffix) {
      right: 18px;
    }
  }
  .el-button {
    border-radius: 0;
    color: #000;
    background-color: #fff;
  }
  .el-button:hover {
    border-radius: 0;
    background-color: #5473e6;
    color: #fff;
  }
  .page-search-eventChoose {
    flex-shrink: 0;
    width: 140px;
    margin-right: 15px;
    height: 30px;
    :deep(.el-input__wrapper) {
      height: 30px;
      border-radius: 0;
      background-color: #fff !important;
      box-shadow: unset !important;
    }
  }
}
</style>
